<script setup lang="ts">
// import Taro from "@tarojs/taro";

const { gap = 20 } = defineProps<{
  gap?: number;
}>();
</script>

<template>
  <!-- :style="{ gap: `0 ${Taro.pxTransform(gap)}` }" 小程序下 ios 无效 -->
  <view
    class="flex flex-wrap by-space"
    :style="{
      '--gap': gap && gap + 'rpx',
      margin: `-${gap}rpx 0 0 -${gap}rpx`,
    }"
  >
    <slot />
  </view>
</template>

<style lang="less">
.by-space {
  --gap: 8px;

  & > text,
  & > view {
    margin: var(--gap) 0 0 var(--gap);
  }
}
</style>
